<template>
  <li class="todo-item">
    <div class="todo-content" :class="{ completed: completed }">
      <input 
        type="checkbox" 
        :checked="completed" 
        @change="toggleCompletion"
      >
      <span>{{ title }}</span>
      <button @click="removeTodo" class="remove-btn">删除</button>
    </div>
  </li>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    title: {
      type: String,
      required: true
    },
    completed: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleCompletion() {
      this.$emit('update:completed', !this.completed);
    },
    removeTodo() {
      this.$emit('remove-todo');
    }
  }
}
</script>

<style scoped>
.todo-item {
  margin: 10px 0;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.todo-content {
  display: flex;
  align-items: center;
}

.todo-content.completed span {
  text-decoration: line-through;
  color: #888;
}

.todo-content input[type="checkbox"] {
  margin-right: 10px;
}

.remove-btn {
  margin-left: auto;
  padding: 4px 8px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.remove-btn:hover {
  background-color: #ff5252;
}
</style>